<template>
  <div class="fund-items">
    <moudle-header :my-title="myTitle" :page-name="pageName"></moudle-header>
    <!-- <div class="fund-pic"><img src="../../assets/images/bnrs/reg-bg.jpg"></div> -->
    <moudle-fund v-for="(item,index) in myItems" :key="index" :funds="item" :start-time="item.startTime" :end-time="item.endTime"></moudle-fund>
    <moudle-footer :active-page="activePage"></moudle-footer> 
  </div>
</template>

<script>
import moudleHeader from '../../components/headerComponent';
import moudleFund from '../../components/fundComponent';
import moudleFooter from '../../components/footerComponent';
export default {
  name: 'InvestList',
  components: {moudleHeader,moudleFund,moudleFooter},
  data () {
    return {
      myTitle:"我的财富",
      pageName:'List',
      activePage:"1",
      myItems:[{
        startTime:"2017-11-15 00:00:00",
        is_specify:false,
        endTime: "2017-12-15 10:30:00",
        loan_rate:16,
        term:30,
        term_unit:'天',
        endCountDown:false
      },{
        startTime:"2017-11-15 00:00:00",
        is_specify:false,
        endTime: "2018-02-15 10:30:00",
        loan_rate:18,
        term:3,
        term_unit:'月',
        endCountDown:false
      },{
        startTime:"2017-11-15 00:00:00",
        is_specify:false,
        endTime: "2017-11-22 10:30:00",
        loan_rate:10,
        term:7,
        term_unit:'天',
        endCountDown:false
      },{
        startTime:"2017-11-15 00:00:00",
        is_specify:false,
        endTime: "2018-05-15 10:30:00",
        loan_rate:20,
        term:6,
        term_unit:'月',
        endCountDown:false
      }]
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.fund-items {
  padding-bottom: 5rem;   
  .fund-pic {
    img {
      width: 100%;
    }
  }
}
</style>
